<nz-layout class="app-layout">
  <ng-container *ngIf="!isLogin">

    <app-login></app-login>

  </ng-container>

  <ng-container *ngIf="isLogin">

  <nz-sider class="menu-sidebar"
            nzCollapsible
            nzWidth="256px"
            nzBreakpoint="md"
            [(nzCollapsed)]="isCollapsed"
            [nzTrigger]="null">
    <div class="sidebar-logo">
      <a href="https://ng.ant.design/" target="_blank">
        <img src="assets/logo.jpeg" alt="logo">
        <h1>后台管理</h1>
      </a>
    </div>

    <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed" style="height: 'calc(100vh - 80px)';overflow-y: auto;">
      <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: myMenus }"></ng-container>
      <ng-template #menuTpl let-myMenus>
        <ng-container *ngFor="let menu of myMenus">
          <li
            *ngIf="!menu?.children"
            nz-menu-item
            [nzPaddingLeft]="menu.level * 24"
          >
            <i nz-icon [nzType]="menu.me.icon" *ngIf="menu.me.icon"></i>
            <a [routerLink]="menu.me.url">{{ menu.me.name }}</a>
          </li>
          <li
            *ngIf="menu?.children"
            nz-submenu
            [nzPaddingLeft]="menu.level * 24"
            [nzOpen]="menu.open"
            [nzTitle]="menu.me.name"
            [nzIcon]="menu.me.icon"
          >
            <ul>
              <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menu?.children }"></ng-container>
            </ul>
          </li>
        </ng-container>
      </ng-template>

    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header>
      <div class="app-header">
        <span class="header-trigger" (click)="isCollapsed = !isCollapsed">
            <i class="trigger"
               nz-icon
               [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
            ></i>
        </span>

      </div>
      <!-- <nz-breadcrumb [nzAutoGenerate]="true"></nz-breadcrumb> -->
      <nz-breadcrumb [nzAutoGenerate]="true">
        <nz-breadcrumb-item>
          <a [routerLink]="['../../']">首页</a>
        </nz-breadcrumb-item>
      </nz-breadcrumb>
      <div style="width: 40%;text-align: right;">欢迎：{{username}}<a (click)="logout()"> 注销</a></div>
    </nz-header>
    <nz-content>
      <div class="inner-content">
        <router-outlet></router-outlet>
      </div>
    </nz-content>
  </nz-layout>
  </ng-container>
</nz-layout>
